<template>
  <div class="add-payslip-forth page-miH page-bgBack">
    <div class="content-con ">
      <a-result status="success" title="发薪申请已提交">
        <template v-slot:extra>
          <a-row type="flex">
            <a-col class="col-left">
              <!-- <img class="img" src="@/assets/img/payslip/finsh.png" alt="失败" /> -->
              <xq-icon type="icon-wancheng1" class="primary_color w32  f30" style="display: block;" />
              <a-divider class="img-v" type="vertical" />
              <!-- <img class="img" src="@/assets/img/payslip/finsh.png" alt="失败" /> -->
              <xq-icon type="icon-wancheng1" class="primary_color w32  f30" style="display: block;" />
            </a-col>
            <a-col class="full" style="text-align:left">
              <a-row class="content-con-text mg_b24">
                <a-col class="mg_b12 round"
                  ><strong>{{ paySalaryOrderTitle }}发薪已提交</strong></a-col
                >
                <a-col class="sub_tit">
                  可在发薪申请页面查看审批进度
                </a-col>
              </a-row>
              <a-row class="content-con-text">
                <a-col class="mg_b12 round">
                  <strong>
                    发薪 <span class="primary"> {{ paySalaryTotal }}</span> 人
                  </strong>
                  <strong>
                    总金额 <span class="primary"> ￥{{ paySalaryMoney }}</span>
                  </strong>
                </a-col>
                <a-col class="sub_tit">
                  到账方式：支持{{ paySalaryTypes }}到账
                  <span class="primary mg_l4 mg_r4"></span>
                  申请时间： {{ paySalaryGmtCreate }}
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </template>
      </a-result>
      <a-button type="primary" @click="goDetail">查看详情 </a-button>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      paySalaryOrderTitle: "",
      paySalaryTypes: "",
      paySalaryGmtCreate: "",
      paySalaryMoney: "",
      paySalaryTotal: "",
      payArr: ["支付宝", "微工卡", "银行卡"],
      info: {}
    };
  },
  created() {
    const info = JSON.parse(sessionStorage.getItem("paySalaryInfo"));
    this.info = info;
    if (info.type === 1) this.paySalaryTypes = "支付宝";
    if (info.type === 2) this.paySalaryTypes = "微工卡";
    if (info.type === 3) this.paySalaryTypes = "银行卡";

    this.paySalaryOrderTitle = info.orderTitle;
    this.paySalaryGmtCreate = info.gmtCreate ? moment(info.gmtCreate).format("YYYY-MM-DD HH:mm") : "";
    this.paySalaryMoney = info.money;
    this.paySalaryTotal = info.totalCount;
  },
  methods: {
    // 查看详情
    goDetail() {
      const record = JSON.stringify(this.info);
      this.$router.replace({ path: "/paySalary/examineDetail", query: { record } });
    }
  }
};
</script>
<style lang="scss" scoped>
.add-payslip-forth {
  padding: 24px;
  .content-con {
    text-align: center;
    padding: 24px 162px;
    .title {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 12px;
    }
    .content-con-text {
      padding: 24px;
      background: rgba(250, 250, 250, 1);
      border: 1px solid rgba(241, 241, 241, 1);
      border-radius: 4px;
    }
    .col-left {
      padding: 24px;
      .img {
        display: block;
        width: 32px;
        height: 32px;
      }
      .img-v {
        margin: 24px 0;
        height: 60px;
      }
    }
    .round {
      width: 100%;
      &::after {
        content: "";
        position: absolute;
        left: -12px;
        top: 6px;
        border-radius: 100%;
        border: 2px solid var(--primary);
        width: 8px;
        height: 8px;
      }
    }
  }
}
</style>
